<template>
  <section class="shop-activity-properties">
    <div class="title">活动与属性</div>
    <div class="list">
      <div v-for="(item, index) in activityProperties.activities" class="item">
        <span
          class="icon"
          :style="{ backgroundColor: '#' + item.icon_color }"
          >{{ item.icon_name }}</span
        >
        <span class="desc">{{ item.description }}</span>
        (APP专享)
      </div>
      <div v-for="(item, index) in activityProperties.supports" class="item">
        <span
          class="icon"
          :style="{ backgroundColor: '#' + item.icon_color }"
          >{{ item.icon_name }}</span
        >
        <span class="desc">{{ item.description }}</span>
        (APP专享)
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    activityProperties: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>
<style lang="less" scoped>
.shop-activity-properties {
  margin-bottom: 10px;
  background-color: #fff;
  .title {
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
    font-size: 18px;
    color: #333333;
  }
  .list {
    padding: 10px;
    font-size: 12px;
    .item {
      padding: 15px 0;
      .icon {
        padding: 3px;
        border-radius: 3px;
        margin-right: 10px;
        font-size: 10px;
        color: #fff;
      }
    }
  }
}
</style>